<template>
  <div id="admin">
    <div class="message">
      <div class="hint">Admin Login</div>
      <el-input v-model="username"
                class="input"
                prefix-icon="el-icon-user-solid"
                placeholder="账号"></el-input><br><br>
      <el-input v-model="password"
                class="input" prefix-icon="el-icon-s-open"
                placeholder="密码" show-password></el-input><br><br>
      <el-button
              class="login"
              id="TencentCaptcha"
              :data-appid="appId"
              data-cbfn="callback"
              type="button"
              >登录</el-button>
    </div>
  </div>
</template>

<script >
  import axios from 'axios'
  import getUserIP from "../../utils/getIP";
  export default {
    name: "Admin",
    data(){
      return{
        appId : '2076199524',
        username:'',
        password:''
      }
    },
    mounted() {
      window.callback = (res) =>{
        this.verify(res)
      }
    },
    methods:{
      verify(res){
        // console.log(res)
        if(res.ret === 0){
          let data = {}
          data.ticket = res.ticket
          data.randstr = res.randstr
          data.userip = returnCitySN['cip']
          // console.log(data)
          this.$http.post('/epidemic/verify',data).then(res => {
            console.log(res)
            if(res.data.status === 200 && res.data.msg == "验证成功"){
              console.log("验证成功")
              this.login()
            }
            else alert("验证失败")
          })

        }
      },
      login(){
        let params = new URLSearchParams();
        params.append('username',this.username);
        params.append('password',this.password);
        // let params = {'username':this.username,'password':this.password}
            this.$http({
              url:"/epidemic/admin/login",
              method:"post",
              header:{
                "content-type":"application/x-www-form-urlencoded"
              },
              data:params
            }).then(res => {
              console.log(res.data)
              if(res.data.status === 200){
                this.$router.push('/accountManagement')
              }
            }).catch(err => {
              console.log(err)
            })
      }
    }
  }
</script>

<style scoped>
  #admin{
    height: 100vh;
    background-color: #e1e8e8;
    position: relative;
  }
  .message{
    width: 500px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: white;
    /*padding-top: 50px;*/
    border-radius: 10px;
  }
  .hint{
    border-radius: 10px 10px 0 0;
    font-size: 25px;
    background-color: #13BB7C;
    color: white;
    height: 80px;
    line-height: 80px;
    margin-bottom: 40px;
  }
  .input{
    width: 300px;
    font-size: 18px;
  }
  .login{
    font-size: 18px;
    width: 100px;
    color: #4ca1a1;
  }
  .login:hover{
    color: #438989;
  }
</style>